<template>
  <el-card>
    <div slot="header" class="clearfix">
      <span>排期管理</span>
    </div>
    <el-row :gutter="40">
      <el-col>
        <el-form inline size="mini">
          <el-form-item label="公众号">
            <el-select
              v-model="mpid"
              filterable
              placeholder="公众号"
              @change="getCalenderData">
              <el-option
                v-for="(item,index) in tencentList"
                :label="item.label"
                :key="index"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="时间">
            <el-date-picker
              v-model="time"
              type="month"
              value-format="yyyy-MM"
              placeholder="选择月"
              @change="getCalenderData"/>
          </el-form-item>
        </el-form>
      </el-col>

      <!--排期图-->
      <el-col :lg="12" :md="12" :sm="24">
        <pieChart
          :datas="datas"
          :range="[time]"
          class="calendar"
          height="700px"
        />
      </el-col>

      <el-col :lg="8" :md="8" :sm="24">
        <el-card
          v-for="(item,index) in details"
          :class="[index===0?'danger':(index===1?'success':'primary') ,'cards',]">
          <div slot="header" class="title">
            <span>{{ item.company }}</span>
            <span>{{ item.time }} </span>
          </div>
          <el-row class="items" type="flex">
            <span class="title">登记人:</span>
            <span>{{ item.people }}</span>
          </el-row>
          <el-row class="items" type="flex">
            <span class="title">价格:</span>
            <span>{{ item.price }}</span>
          </el-row>
          <el-row class="items" type="flex">
            <span class="title">备注:</span>
            <span>{{ item.note }}</span>
          </el-row>
          <el-row type="flex" justify="end">
            <el-button size="mini" type="primary" @click="orderDetails(item)">查看详情</el-button>
          </el-row>
        </el-card>

      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import { mapGetters } from 'vuex'
import UploadExcelComponent from '@/components/UploadExcel/index.vue'
import pieChart from '../../components/pieChart'
import echarts from 'echarts'

export default {
  name: 'Home',
  components: { UploadExcelComponent, pieChart },
  data() {
    const defaultTime = () => {
      return (new Date().getFullYear() + '-' + (new Date().getMonth() + 1))
    }

    const scatterData = this.getOrderList(defaultTime())
    return {
      time: defaultTime(),
      mpid: '',

      datas: scatterData,
      tencentList: [],
      details: [
        {
          company: '1公司',
          time: '2018-11-11',
          people: '**商务',
          price: '1123123元',
          note: '*********'
        },
        {
          company: '2公司',
          time: '2018-11-11',
          people: '**商务',
          price: '324234元',
          note: '*********'
        },
        {
          company: '3公司',
          time: '2018-11-11',
          people: '**商务',
          price: '456456元',
          note: '*********'
        }
      ]
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'roles'
    ]),
    filter_info() {
      const obj = {}
      console.log(new Date(this.time))
      const startTime = new Date(this.time)
      const endTime = new Date(new Date(this.time).getTime() + 31 * 24 * 3600 * 1000)
      obj.start_time = startTime.getFullYear() + '-' + (startTime.getMonth() + 1) + '-' + startTime.getDate()
      obj.End_time = endTime.getFullYear() + '-' + (endTime.getMonth() + 1) + '-' + endTime.getDate()
      obj.mpid = this.mpid
      return obj
    }
  },
  watch: {
    time(val) {
      console.log(val, 'bal')
      this.datas = this.getOrderList(val)
    },
    filter_info(val) {
      console.log(val, 'filter_info')
    }
  },
  mounted() {
    // 获取公众号列表
    this.getTencentList()
    // this.getOrderList()
  },
  methods: {

    getCalenderData(val) {
      console.log(val)
    },

    change() {
      this.datas = Math.random() * 100
    },

    // 获取公众号列表
    getTencentList() {
      this.$get('action/WechatNumber/tree')
        .then(res => {
          const list = []
          if (res.data.WechatTree) {
            res.data.WechatTree.forEach(item => {
              list.push({
                label: item.name,
                value: item.id
              })
            })
          }
          this.tencentList = list
          this.mpid = list[0].value
        })
    },

    // 获取订单
    getOrderList(time) {
      const datas = { ...this.filter_info, rows: 31, type: 0 }

      this.$get('action/WechatAdvs/dataGrid', datas)
        .then(res => {
          let list
          const data = res.data
          const result = []
          for (let i = 0; i < 31; i++) {
            result[i] = [
              {
                name: '头图',
                value: 0
              },
              {
                name: '次一图',
                value: 0
              },
              {
                name: '次二图',
                value: 0
              }
            ]
          }
          // if (data.list && data.list.length) {
          data.list.forEach((item, index) => {
            const index1 = new Date(item.publish_at).getDate()
            console.log(result[index1 - 1][1])
            if (item.ad_place_name === '头图') {
              result[index1 - 1][0] = {
                name: item.ad_place_name,
                value: 1
              }
            } else if (item.ad_place_name === '次一图') {
              result[index1 - 1][1] = {
                name: item.ad_place_name,
                value: 1
              }
            } else if (item.ad_place_name === '次二图') {
              result[index1 - 1][2] = {
                name: item.ad_place_name,
                value: 1
              }
            }
          })
          // }
          const final = this.getVirtulData(time, result)
          console.log(final, result, 'result')
          this.datas = final
        })
    },

    // 创建假数据
    getVirtulData(times, item) {
      var date = +echarts.number.parseDate(times + '-01')
      var end = +echarts.number.parseDate(times + '-01') + 31 * 24 * 3600 * 1000
      console.log(date, end, '创建了')
      var dayTime = 3600 * 24 * 1000
      var data = []
      for (var time = date, i = 0; time < end; time += dayTime, i++) {
        data.push([
          echarts.format.formatTime('yyyy-MM-dd', time),
          item[i]
        ])
      }
      return data
    },

    // 查看详情
    orderDetails(item) {
      this.$router.push({
        name: 'adv_order.order_info',
        query: {
          id: item.id
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
    .title {
        display: flex;
        justify-content: space-around;

        span {
            flex: 1;
        }
    }

    .items + .items {
        margin-top: 15px;
    }

    .items .title {
        width: 30%;
    }

    .calendar {
        box-shadow: 0 0 5px 2px #ddd
    }

    .cards {
        color: #fff;
    }

    .cards + .cards {
        margin-top: 20px;
    }
</style>
